import React, {useState,} from 'react'
import './FormPwdInput.css'
import CantSeeIcon from '../../res/images/web/FormInput/eyes1@2x.png'
import CanSeeIcon from '../../res/images/web/FormInput/eyes2@2x.png'

const FormPwdInput = (props) => {

    const [pwdCanSee, setPwdCanSee] = useState(false)
    const [inputFocus, setInputFocus,] = useState(false)

    const [inputType, setInputType] = useState('password')

    const {
        value,
        onChange,
        placeholder,
    } = props

    const IconUrl = pwdCanSee ? CanSeeIcon : CantSeeIcon

    const IconStyle = {
        position: 'absolute',
        right: '0',
        top: '50%',
        height: 28,
        width: 28,
        transform: 'translate(-50%, -50%)',
    }

    const onIconClick = () => {
        setPwdCanSee(!pwdCanSee)
        if (pwdCanSee) {
            setInputType('password')
        } else {
            setInputType('text')
        }
    }

    const Icon = <img
        style={IconStyle}
        src={IconUrl}
        onClick={onIconClick}
        alt=''
    />


    const template = (
        <div className={inputFocus? 'custom-input custom-input-touched' : 'custom-input'}>
            <input
                type={inputType}
                placeholder={placeholder}
                value={value}
                onChange={onChange}
                onFocus={e => setInputFocus(true)}
                onBlur={e => setInputFocus(false)}
            />
            {Icon}
        </div>
    )

    return template
}

export default FormPwdInput
